<template>
  <div>
    <!-- 分类 -->
    <CategorySelect
      width="100%"
      @getCategoryId="getCategoryId"
      :disabled="changeShow.current != changeShow.index"
    ></CategorySelect>

    <el-card style="margin-top: 10px">
      <div v-show="changeShow.current == changeShow.index">
        <!-- button -->
        <el-button
          :disabled="!this.categoryId.c3"
          type="primary"
          icon="el-icon-puls"
          @click="changeShow.current = changeShow.addSpu"
          >添加spu</el-button
        >
        <!-- 展示表格 -->
        <el-table border :data="spuList" height="65vh">
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          ></el-table-column>
          <el-table-column prop="spuName" label="spu名称"></el-table-column>
          <el-table-column prop="description" label="spu描述"></el-table-column>
          <el-table-column prop="" label="操作" width="">
            <template slot-scope="{ row, $index }">
              <el-button
                type="primary"
                title="添加sku"
                icon="el-icon-plus"
                size="mini"
                @click="clickaddSku(row)"
              ></el-button>
              <el-button
                type="warning"
                title="编辑spu"
                icon="el-icon-edit"
                size="mini"
                @click="clickEidtspu(row.id)"
              ></el-button>
              <el-button
                type=""
                title="查看sku"
                icon="el-icon-info"
                size="mini"
                @click="lookSkuList(row)"
              ></el-button>
              <!-- 气泡对话框 -->
              <el-popconfirm
                title="确定删除吗？"
                @onConfirm="delSpu(row.id)"
                style="margin-left: 10px"
              >
                <el-button
                  slot="reference"
                  type="danger"
                  title="删除spu"
                  icon="el-icon-delete"
                  size="mini"
                ></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          :page-size="10"
          @current-change="getSpuList"
          @size-change="getSpuList(1, $event)"
          style="text-align: center"
          :current-page="1"
          :total="totalPage"
          :page-sizes="[3, 5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
      <!-- 添加,编辑spu form -->
      <addSpu
        v-show="changeShow.current == changeShow.addSpu"
        @changeShow="ev_changeShow"
        :tradeMarkList="tradeMarkList"
        :attrList="attrList"
        :category3Id="this.categoryId.c3"
      ></addSpu>
      <!-- 添加sku form -->
      <addSku
        v-show="changeShow.current == changeShow.addSku"
        @changeShow="ev_changeShow"
        :tradeMarkList="tradeMarkList"
        :attrList="attrList"
        :category3Id="this.categoryId.c3"
      ></addSku>
      <!-- 查看 sku -->
      <el-dialog
        :title="lookSku_spuName"
        :visible.sync="dialogTableVisible"
        @close="skuInfoList = []"
      >
        <el-table
          :data="skuInfoList"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.3)"
        >
          <el-table-column
            property=""
            type="index"
            label="序号"
            width="80"
            align="center"
          ></el-table-column>
          <el-table-column property="skuName" label="名称"></el-table-column>
          <el-table-column property="skuDesc" label="描述"></el-table-column>
          <el-table-column property="price" label="价格"></el-table-column>
          <el-table-column property="weight" label="重量"></el-table-column>
          <el-table-column property="" label="默认图片">
            <template slot-scope="{ row }"
              ><img
                :src="row.skuDefaultImg"
                style="width: 120px; height: 100px; object-fit: contain"
            /></template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import addSpu from './addSpu'
import addSku from './addSku'
export default {
  components: { addSpu, addSku },
  data() {
    return {
      sku: {
        category3Id: 61,
        createTime: '2021-12-10 09:31:42',
        id: undefined,
        isSale: 1,
        price: 5999,
        skuAttrValueList: null,
        skuDefaultImg:
          'http://47.93.148.192:8080/group1/M00/00/01/rBHu8l-rfvmAIpgZAAIvrX6L9fo612.jpg',
        skuDesc:
          '小米10 至尊纪念版 双模5G 骁龙865 120HZ高刷新率 120倍长焦镜头 120W快充 12GB+256GB 陶瓷黑 游戏手机',
        skuImageList: null,
        skuName:
          '小米10 至尊纪念版 双模5G 骁龙865  120W快充 8GB+128GB 陶瓷黑 游戏手机',
        skuSaleAttrValueList: null,
        spuId: 1,
        tmId: 1,
        weight: '1.00'
      },
      // 查看sku对话框
      loading:false,
      skuInfoList: [],
      lookSku_spuName: '',
      dialogTableVisible: false,
      // 切换显示
      changeShow: {
        current: '1',
        index: '1',
        addSpu: '2',
        addSku: '3'
      },
      categoryId: {},
      spuListInfo: {},
      // 表单填写时需要展示选择
      tradeMarkList: [],
      attrList: []
    }
  },
  computed: {
    totalPage() {
      return this.spuListInfo.total || 0
    },
    spuList() {
      return this.spuListInfo.records || []
    }
  },
  methods: {
    // 查看sku
    async lookSkuList(row) {
      this.loading=true
      this.dialogTableVisible = true
      this.lookSku_spuName = `${row.spuName} 的SKU列表`
      const res = await this.$API.sku.getSkuListBySpuId(row.id)
      if (res.code == 200) {
        this.skuInfoList = res.data    
      } else {
        this.$message({
          type: 'error',
          message: res.message + ':' + (res.data || '')
        })
      }
      this.loading=false
    },
    // 删除spu
    async delSpu(id) {
      const res = await this.$API.spu.delSpu(id)
      if (res.code == 200) {
        this.$message({ type: 'success', message: '删除成功' })
        // 跟新列表数据
        this.getSpuList()
      } else {
        this.$message({
          type: 'error',
          message: res.message + ':' + (res.data || '')
        })
      }
    },
    // 获取商品属性列表
    async getAttrList() {
      const res = await this.$API.spu.getAttrList()
      if (res.code == 200) {
        this.attrList = res.data
      }
    },
    // 获取品牌列表
    async getTradeMarkList() {
      const res = await this.$API.spu.getTradeMarkList()
      if (res.code == 200) {
        this.tradeMarkList = res.data
      }
    },
    clickEidtspu(id) {
      this.$Bus.$emit('editSpuInfo', id)
    },
    clickaddSku(row) {
      const { id: spuId, spuName, tmId } = row
      const { categoryId } = this
      this.$Bus.$emit('addSkuInfo', { spuId, categoryId, spuName, tmId })
    },
    // 获取3个分类的ID
    getCategoryId(data) {
      this.categoryId = data
      this.getSpuList()
    },
    // 获取数据
    async getSpuList(page = 1, limit = 10) {
      const res = await this.$API.spu.getSpuList(
        page,
        limit,
        this.categoryId.c3
      )
      if (res.code == 200) {
        this.spuListInfo = res.data
      }
    },
    // 改变三个组件的显示
    ev_changeShow(is_update = false, flag = this.changeShow.index) {
      if (is_update) {
        this.getSpuList()
      }
      this.changeShow.current = flag
    }
  },
  created() {
    this.getTradeMarkList()
    this.getAttrList()
  }
}
</script>

<style></style>
